import { defineComponent } from "vue";
import style from "./index.module.less";
import { getSize } from "@/command/apiTool";
export default defineComponent({
  props: {
    text1: {
      type: String || Number,
      default: "",
    },
    text2: {
      type: String || Number,
      default: "",
    },
    width: {
      type: Number,
      default: 156,
    },
    height: {
      type: Number,
      default: 87,
    },
    bgColor: {
      type: String,
      default: "#F0F4FD",
      //   #CED6FF
    },
    padding: {
      type: String,
      default: "10px 0 0 0",
    },
    boxPadding: {
      type: String,
      default: "10px",
    },
  },
  emits: ["click"],
  setup(props, { slots, emit }) {
    const renderCard = () => {
      return (
        <div
          class={[style["affluent1"]]}
          style={{
            width: getSize(props.width),
            height: getSize(props.height),
            padding: props.boxPadding,
            backgroundColor: props.bgColor,
          }}
          onClick={() => emit("click")}
        >
          {slots.default?.()}
          <div style={{ padding: props.padding }}>
            <div class={["font--t4 wt mb-3"]}>{props.text1}</div>
            <div class={["font--t1"]} style={{ color: "#A3A3A3" }}>
              {props.text2}
            </div>
          </div>
          {slots.top?.()}
        </div>
      );
    };
    return () => <div>{renderCard()}</div>;
  },
});
